<template>
  <div class="hello">

      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="180">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建日期">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size= "pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
      align="right">
      </el-pagination>
  </div>
</template>

<script>

export default {

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val;
      this.list();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val;
      this.list();
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    list(){
      this.$http.post("/user/list",{"currentPage":this.currentPage,"pageSize":this.pageSize})
      .then(Result=>{
        console.log(Result+"我在这里哦")
        this.tableData=Result.data.rows;
        this.totals=Result.data.totals;
      })
      .catch(Result=>{
        alert("请求错误")
      })
    }
  },
  data() {
    return {
        currentPage: 1,
        totals:0,
        pageSize:2,

      tableData: []
    }
  },
  mounted() {
    this.list();

  }
}
</script >

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

</style>
